<template>
  <view class="container">
    <image src="/static/logo-D84ko8Ll.png" mode="" class="logo"></image>
    <view class="title">Simplify your job search</view>
    <view class="subtitle">让求职更简单</view>
    <button class="login-btn" @tap="goToPhoneLogin">邮箱密码登录</button>
    <button class="login-btn apple" @tap="goToCodeLogin">邮箱验证码登录</button>
    <button class="login-btn wechat" @tap="goToWechatLogin">微信登录</button>

    <view class="ques">
      <view @tap="goForgot">忘记密码</view>
      <view class="divider">|</view>
      <view @tap="goRegister" class="register-link">去注册</view>
    </view>
    <view class="footer">
      登录即表明同意隐私协议和用户服务协议
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goToPhoneLogin () {
      uni.navigateTo({ url: '/pages/login/phoneLogin/phoneLogin' });
    },
    goToCodeLogin () {
      uni.navigateTo({ url: '/pages/login/codeLogin/codeLogin' });
    },
    goRegister () {
      uni.navigateTo({ url: '/pages/register/register-index/register-index' });
    },
    goForgot () {
      uni.navigateTo({ url: '/pages/forgot/forgot-index/forgot-index' });
    },
    goToWechatLogin () {
      uni.navigateTo({ url: '/pages/login/wechatLogin/wechatLogin' });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 60rpx;
  min-height: 86vh;
  background-color: #f5f4f1;
}

.logo {
  width: 200rpx;
  height: 200rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 80rpx;
}

.login-btn {
  width: 100%;
  margin-bottom: 30rpx;
  padding: 20rpx;
  font-size: 32rpx;
  color: #fff;
  background-color: #b6ccd8;
  border-radius: 70rpx;
  border: 2rpx solid #1d1c1c; /* 简单边框 */
}

.wechat {
  background-color: #b6ccd8;
}

.qq {
  background-color: #b6ccd8;
}

.apple {
  background-color: #b6ccd8;
}

.ques {
  font-size: 24rpx;
  color: #999;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}

.divider {
  margin: 0 10rpx;
}


.footer {
  margin-top: 60rpx;
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

</style>